<script setup>
import { ref,onMounted } from 'vue'
import E from 'wangeditor'
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
import {zyOffice} from '/public/zyoffice/js/w'
import '/public/layer-v3.1.1/layer/layer'
import '/public/layer-v3.1.1/layer/theme/default/layer.css'

//zyoffice Button
class zyofficeBtn extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu" data-title="导入Word(docx格式)">
                <img src="/public/zyoffice/css/w.png"/>
            </div>`
        )
        super($elem, editor)
    }
    clickHandler() {
        zyOffice.getInstance().SetEditor(this.editor);
        zyOffice.getInstance().api.openDoc();
    }
    tryChangeActive() {this.active()}
}
//zywordexport Button
class zywordexportBtn extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu" data-title="导出Word(docx格式)">
                <img src="/public/zyoffice/css/exword.png"/>
            </div>`
        )
        super($elem, editor)
    }
    clickHandler() {
        zyOffice.getInstance().SetEditor(this.editor);
        zyOffice.getInstance().api.exportWord();
    }
    tryChangeActive() {this.active()}
}
//pdf paster Button
class zyofficepdfBtn extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu" data-title="导入PDF文档">
                <img src="/public/zyoffice/css/pdf.png"/>
            </div>`
        )
        super($elem, editor)
    }
    clickHandler() {
        zyOffice.getInstance().SetEditor(this.editor);
        zyOffice.getInstance().api.openPdf();
    }
    tryChangeActive() {this.active()}
}
const msg="zyoffice-vue3-cli-wangEditor"

 onMounted(()=>{
    zyOffice.getInstance({
        word: 'http://localhost:13710/zyoffice/word/convert',
        wordExport: 'http://localhost:13710/zyoffice/word/export',
        pdf: 'http://localhost:13710/zyoffice/pdf/upload'        
    });//加载控件

    // 注册菜单
    E.registerMenu("zyofficeBtn", zyofficeBtn)
    E.registerMenu("zywordexportBtn", zywordexportBtn)
    E.registerMenu("zyofficepdfBtn", zyofficepdfBtn)

    const editor = new E("#editor")
    editor.create()
    //
    const edt2 = new E("#editor2")
    edt2.create()
 })


</script>

<template>
  <h1 style="text-align: center;">{{ msg }}</h1>
  <div id="editor"></div><br/>
  <p>第二个编辑器</p>
  <div id="editor2"></div>  
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
